<template>
	
	<div class="list">
		<li class="item" 
		v-for="item of letters" 
		:key="item"
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove"
		@touchend="handleTouchEnd"
		@click="handleLetterClick"
		:ref="item"
		>{{item}}</li>
	</div>
	
</template>


<script>
	//该组件用于字母组件
	export default {
		name : 'CityAlphabet',
		props:{
			citys : Object
		},
		data () {
			return{
				touchStatus : false,
				startY : 0,
				timer: null
			}
		},
		updated(){
			this.startY =this.$refs['A'][0].offsetTop
		},
		computed:{
				letters(){
					const letters = []
					for (let i in this.citys) {
						letters.push(i)
					}
					return letters
				}
		},
		methods:{
			handleLetterClick (e){
				this.$emit('change',e.target.innerText)
			},
			handleTouchStart (){
				this.touchStatus = true
			},
			handleTouchMove (e){
				if(this.touchStatus){
					//当可以上下拖动的时候
					//截流，
					if(this.timer){
						clearTimeout(this.timer)
					}
					//滚动的时候频率过高，不利于性能，所以做了一个定时器进行截流，假如在16毫秒之内继续点击了滚动，那么我们不进行操作
					this.timer = setTimeout(() =>{
						const touchY = e.touches[0].clientY - 79
						const index = Math.floor((touchY - this.startY) / 20 )
						if(index >= 0 && index < this.letters.length){
							this.$emit('change',this.letters[index])
						}
					},16)
				}
				
				
			},
			handleTouchEnd (){
				this.touchStatus = false
				
				
			}
		}
	}
	
</script>


<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.list
	 position:absolute
	 right:0
	 top:1.58rem
	 bottom:0
	 width:.4rem
	 display:flex
	 flex-direction:column
	 justify-content:center
	 .item
	  line-height:.44rem
	  text-align:center
	  color:$bgColor
	  list-style:none
	
</style>